<template>
  <el-container class="container">
    <el-header class="header">Header</el-header>
    <el-container class="box">
      <el-aside class="aside">
        <el-menu
          :default-active="val"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          @select="changeRoute"
          >
          <el-submenu index="1">
            <template #title>
              <i class="el-icon-location"></i>
              <span>产品管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/pro/list">商品列表</el-menu-item>
              <el-menu-item index="/pro/select">筛选列表</el-menu-item>
              <el-menu-item index="/pro/seckill">秒杀列表</el-menu-item>
              <el-menu-item index="/pro/recommend">推荐列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template #title>
              <i class="el-icon-location"></i>
              <span>用户管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/user/list">用户列表</el-menu-item>
              <el-menu-item index="/user/admin">管理员列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item index="/home">
            <i class="el-icon-setting"></i>
            <template #title>首页</template>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container class="mainContainer">
        <el-main>
          <router-view></router-view>
        </el-main>
        <el-footer class="footer">Footer</el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>
<script>
import { defineComponent, ref, watch, onMounted } from "vue";
import { useRouter, useRoute } from 'vue-router'
export default defineComponent({
  setup () {
    const val = ref('/pro/list')
    const router = useRouter()
    const route = useRoute()
    function changeRoute (index) {
      console.log(index)
      router.push(index)
      
    }
    // onMounted(() => {
    //   console.log(route.path)
    //   val.value = route.fullPath.value
    //   // console.log(val.value)
    // })
    return {
      changeRoute,
      val
    }
  }
})
</script>
<style lang="stylus">
*
  padding 0
  margin 0
html, body, #app, .container
  width 100%
  height 100%

.container
  .header
    width 100%
    height 64px
    background-color #efefef
  .box
    .aside
      background-color rgba(0, 0, 0, 0.8)
</style>